@rotate-time: 10ms;

.record-list {
  padding-left: 0;
  margin-bottom: 0;

  ul {
    //padding-left: @smallPadding * 4;
  }

  .record-list-item {
    list-style: none;
    padding: @smallPadding/2 @smallPadding/2 @smallPadding/2 @smallPadding * 4;


    &.is-root {
      padding: @smallPadding/2;
    }

    &.field-addition {
      background-color: #eaffea;

      &.is-root {
        background-color: inherit;
        .root-label {
          .field-name {
            background-color: #eaffea;
          }
        }
      }
    }

    .value-addition {
      background-color: #a6f3a6;
    }

    &.field-deletion {
      background-color: #ffecec;
      &.is-root {
        background-color: inherit;

        .root-label {
          .field-name {
            background-color: #ffecec;
          }
        }
      }
    }

    .value-deletion {
      background-color: #f8cbcb;
    }

    label {
      margin-bottom: 0;
    }

    .field-name {
      //display: inline-block;

      .lane-label, .predicate-label {
        opacity: 0.6;
      }

      .lane-value {
        color: blue;
      }

      .predicate-value {
        color: #008000;
      }
    }

    .field-type {
      padding-left: @defaultPadding;
      opacity: 0.4;

      &:before {
        content: '{';
      }

      &:after {
        content: '}';
      }
    }

    .dirty {
      color: @brand-danger;
      font-style: italic;
    }

    .toggler {
      font-size: 1em;
      line-height: 1em;
      vertical-align: middle;
      opacity: 0.6;
      cursor: pointer;

      &:after {
        display: inline-block;
        transition: transform @rotate-time ease-in;
        content: "►";
      }

      &.open:after{
        transform: rotate(90deg);
      }
    }

    .array-length {
      color: blue;
    }


    .record-date-toggle {
      padding-left: @defaultPadding;
    }

    .show-more {
      a:first-child {
        padding-left: @defaultPadding * 2;
      }

      span {
        padding-left: @defaultPadding;
        padding-right: @defaultPadding;
      }
    }
  }
}